import React, { useEffect, useState } from 'react';
import { message, Tabs } from 'antd';
import ParamsAdd from '../CustomParams/add';
import services from '../../../../services/api';

const Compare = (props) => {
  const { record, closeModal } = props;
  const third_list_param_id = props.match.params.id;
  const [versionDetail, setVersionDetail] = useState({});
  const [paramsDetail, setParamsDetail] = useState({});

  useEffect(() => {
    getInitData();
  }, []);

  const getInitData = async () => {
    const { version } = record;
    const getVersionDetail = services.version.detail({ version, third_list_param_id });
    const getParamsDetail = services.customParams.detail({ third_list_param_id });
    const [res1, res2] = await Promise.all([getVersionDetail, getParamsDetail]);
    if (!res1.code) {
      setVersionDetail(res1.data);
    } else {
      message.error(res1.msg);
    }
    if (!res2.code) {
      setParamsDetail(res2.data);
    } else {
      message.error(res2.msg);
    }
  };
  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        请注意，存在修改操作的内容为<span style={{ color: '#006eff' }}>蓝色字体</span>，存在删除操作的内容为
        <span style={{ color: '#e54545' }}>红色字体</span>
      </div>
      <Tabs style={{ width: '100%', margin: '10px 0' }} defaultActiveKey='1'>
        <Tabs.TabPane tab={'当前版本数据'} key='1'>
          <ParamsAdd
            value={paramsDetail}
            compareData={versionDetail}
            isOld={false}
            isCompare={true}
            actionType='detail'
            closeModal={closeModal}
          />
        </Tabs.TabPane>
        <Tabs.TabPane tab={`${record.version}版本数据`} key='2'>
          <ParamsAdd
            isOld={true}
            isCompare={true}
            value={versionDetail}
            compareData={paramsDetail}
            actionType='detail'
            closeModal={closeModal}
          />
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Compare;
